<script lang="ts" setup>
//分享
import { IndexShowData } from "@/api/interface";
import { ref, onMounted, watchEffect } from "vue";
import vueQr from "vue-qr/src/packages/vue-qr.vue";
import {
  Link,
  Share,
  Message,
  Promotion,
  CircleCloseFilled,
} from "@element-plus/icons-vue";
import logoImgs from "@/assets/vue.svg";
interface Props {
  postData: IndexShowData;
}

//接收数据
const props = defineProps<Props>();
//存储数据
const data = ref();
watchEffect(() => {
  data.value = props.postData;
});
onMounted(() => {
  copyContent.value = window.location.href;
});
//二维码
const visible = ref(false);

//生成二维码用图片
const logoImg = ref("");
logoImg.value = logoImgs;

//分享到微博
const shareToWeibo = () => {
  const shareUrl =
    "http://service.weibo.com/share/share.php?url=[URL]&title=[TITLE]&pic=[PIC]&ralateUid=[RELATE_UID]";
  const shareTitle = encodeURIComponent(data.value.title);
  const sharePic = encodeURIComponent(data.value.image);
  const shareRelateUid = encodeURIComponent("微博关联账号的 UID");

  const url = shareUrl
    .replace("[URL]", encodeURIComponent(window.location.href))
    .replace("[TITLE]", shareTitle)
    .replace("[PIC]", sharePic)
    .replace("[RELATE_UID]", shareRelateUid);

  window.open(url, "_blank");
};

//发邮件
const sendEmail = () => {
  let recipient = "";
  let subject = data.value.title; //主题
  let body = copyContent.value; //内容

  //let link = `mailto:${recipient}?subject=${subject}&body=${body}`;
  let link = `mailto:${recipient}?subject=${subject}&body=${body}`;
  window.location.href = link;
};

//复制当前网址
const copyContent = ref();
const copy = async () => {
  await navigator.clipboard.writeText(copyContent.value);
};
</script>

<template>
  <ul class="sharesheet-options">
    <li class="social-option">
      <el-button
        text
        size="default"
        :icon="Promotion"
        @click="visible = true"
      ></el-button>

      <el-dialog
        v-model="visible"
        :show-close="false"
        top="25vh"
        class="modal-content-container"
      >
        <template #header="{ close }">
          <div class="header">
            <el-button text @click="close" :icon="CircleCloseFilled">
            </el-button>
          </div>
        </template>

        <p class="wechat-instructions">
          <span class="qr-instr">微信扫描二维码分享文章</span>

          <figure>
            <div class="wechat-qrcode">
              <vue-qr
                ref="qrCode"
                :text="data.link"
                :logoScale="80"
                :size="190"
                :margin="10"
              />
              <!--
            :logoSrc="logoImg"
          -->
            </div>
          </figure>
        </p>
      </el-dialog>
    </li>
    <li class="social-option">
      <el-button
        text
        size="default"
        :icon="Share"
        @click="shareToWeibo"
      ></el-button>
    </li>
    <li class="social-option">
      <el-button
        text
        size="default"
        :icon="Message"
        @click="sendEmail"
      ></el-button>
    </li>
    <li class="social-option">
      <el-popover
        trigger="click"
        class="box-item"
        effect="dark"
        content="已复制"
        placement="right"
      >
        <template #reference>
          <el-button text size="default" :icon="Link" @click="copy"></el-button>
        </template>
      </el-popover>
    </li>
  </ul>
</template>

<style lang="less" scoped>
//图标
.sharesheet-options {
  height: 42px;
  overflow: visible;
}
.social-option {
  position: relative;
  //z-index: 2;
  list-style: none;
  color: currentColor;
  opacity: 1;
  display: block;

  margin-top: 12px;
  //模态框
  :deep(.modal-content-container) {
    border-radius: @redius;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: 817px;
    header {
      padding: 3px;
      button {
        border: none;
        i {
          font-size: 36px;
          color: rgba(0, 0, 0, 0.56) !important;
        }
      }
    }
  }
}

//二维码
.header {
  text-align: left;
}
.wechat-instructions {
  text-align: center;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0em;

  color: #1d1d1f;
}

.wechat-qrcode {
  display: inline-block;
  vertical-align: top;
  margin-top: 50px;
}

@media only screen and (max-width: 1068px) {
  .social-option {
    :deep(.modal-content-container) {
      width: 692px;
    }
  }
}
@media only screen and (max-width: 734px) {
  .social-option {
    :deep(.modal-content-container) {
      width: 87.5%;
    }
  }
  .wechat-instructions {
    font-size: 24px;
    line-height: 1.16667;
    font-weight: 600;
    letter-spacing: 0.009em;
  }
  .wechat-qrcode {
    margin-top: 35px;
  }
}
</style>
